<template>
  <div>
    <el-table :data="tableData"
              stripe
              style="width: 100%">
      <el-table-column prop="picUrl"
                       label="歌曲名"
                       width="100">
        <template slot-scope="scope">
          <el-avatar shape="square"
                     size="large"
                     style="width: 50px; height: 50px"
                     :src="scope.row.picUrl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="songName"
                       label="歌曲名"
                       width="200">
      </el-table-column>

      <el-table-column prop="artistName"
                       label="歌手名"
                       width="180">
      </el-table-column>

      <el-table-column prop="songTimeStr"
                       label="时长"
                       width="100">
      </el-table-column>

      <el-table-column prop="originType"
                       label="创作类型"> </el-table-column>

      <el-table-column prop="feeDesc"
                       label="版权"> </el-table-column>

      <el-table-column prop="createTime"
                       label="更新时间"> </el-table-column>

      <el-table-column fixed="right"
                       label="操作"
                       width="150">
        <template slot-scope="scope">
          <Button type="success"
                  size="small"
                  @click="handleClick(scope.row)"
                  :class="'row' + scope.row.id">加载</Button>
          <Button v-if="1 === 1"
                  style="margin-left: 10px"
                  type="success"
                  size="small"
                  @click="play()"
                  :class="'row' + scope.row.id">播放</Button>

          <Button v-if="1 === 2"
                  style="margin-left: 10px"
                  type="error"
                  size="small"
                  @click="handleClick(scope.row)"
                  :class="'row' + scope.row.id">删除</Button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-bottom: 20px; margin-top: 20px">
      <Page :total="total"
            :page-size="pageParams.size"
            :current="pageParams.current"
            :page-size-opts="page_size_opts"
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange" />
    </div>

    <audio id="songAudioAdmin"
           :src="musicURL"
           v-show="false"
           controls
           @play="play()"
           @pause="pause()"
           @timeupdate="timeupdate()"></audio>
  </div>
</template>

<script>
import api from '@/api/apis/sys.js'
import musicAPI from '@/api/apis/musicAPI.js'

export default {
  data() {
    return {
      total: 0,
      pageParams: {
        size: 10,
        current: 1,
      },
      page_size_opts: [10, 20, 50, 100],
      tableData: [],
      songId: 0,
      songName: '歌曲名称',
      songArtist: '演唱家',
      songPic: 'https://file.iviewui.com/images/image-demo-11.jpg',
      songTimeStr: '0:00',
      songPercent: 0,
      drawer: true,
      direction: 'btt',
      lrc1: '歌词1',
      lrc2: '歌词2',
      lrc3: '歌词3',
      songInfoData: [],
      musicURL: '',
      lrcData: [],
      lrcIndex: 0,
    }
  },

  mounted() {
    this.list()
  },
  methods: {
    handleClick(row) {
      this.songInfo(row.songId)
    },

    list() {
      api.musicList(this.pageParams).then((res) => {
        this.tableData = res.data.data.result
        this.total = res.data.data.total
      })
    },

    songInfo(songId) {
      musicAPI.songInfo(songId).then((res) => {
        this.songInfoData = res.data.data
        this.musicURL = this.songInfoData.songUrl
        this.lrcData = this.songInfoData.songLrcList
        if (this.lrcData.length > 3) {
          this.lrc1 = this.lrcData[this.lrcIndex + 0].content
          this.lrc2 = this.lrcData[this.lrcIndex + 1].content
          this.lrc3 = this.lrcData[this.lrcIndex + 2].content
        }
        this.lrcIndex = 2
      })
    },
    //播放
    play() {
      console.log('播放')
      document.getElementById('songAudioAdmin').play()
    },
    //暂停
    pause() {
      console.log('暂停')
    },
    //当播放位置被改变时触发
    timeupdate() {
      var songAudioAdminDOM = document.getElementById('songAudioAdmin')
      let time = songAudioAdminDOM.currentTime.toFixed(0)
      // 现在可以安全地读取duration属性
      var durationInSeconds = songAudioAdminDOM.duration
      this.songPercent = (time / durationInSeconds).toFixed(2) * 100
      for (let index = this.lrcIndex; index < this.lrcData.length; index++) {
        const element = this.lrcData[index]
        var second = element.second
        if (second == time) {
          this.lrcIndex++
          const element1 = this.lrcData[index - 1]
          this.lrc1 = element1.content
          this.lrc2 = element.content
          if (index + 1 < this.lrcData.length) {
            const element3 = this.lrcData[index + 1]
            this.lrc3 = element3.content
          }
        }
      }
    },

    //页码切换事件
    tabClick() {
      this.pageParams.current = 1
      this.list()
    },
    //页码变更
    pageChange(current) {
      this.pageParams.current = current
      this.list()
    },
    //切换每页条数
    pageSizeChange(size) {
      this.pageParams.size = size
      this.list()
    },
  },
}
</script>

<style></style>
